import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { TabBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom'

@withRouter
class NavLinkBar extends Component{
  static propTypes={
    data:PropTypes.array.isRequired
  }
  render(){
    const {pathname} = this.props.location
    const navList = this.props.data.filter(d =>!d.hide)
    return (
      <TabBar>
        {navList.map(d=>(
          <TabBar.Item
            key={d.path}
            title={d.text}
            icon={{uri:require(`./img/${d.icon}.png`)}}
            selectedIcon={{uri:require(`./img/${d.icon}-active.png`)}}
            selected={pathname==d.path}
            onPress={()=>{
              this.props.history.push(d.path)
            }}
          >
          </TabBar.Item>
        ))}
      </TabBar>
    )
  }
}

export default NavLinkBar